<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-table
    [dataSource]="dataSource"
    [columns]="displayedColumns"
    matSort
    data-cy="all-pipelines-table"
>
    <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let pipeline">
            <div>
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="150px">
                    <div
                        data-cy="status-pipeline-green"
                        *ngIf="
                            pipeline.running && pipeline.healthStatus === 'OK'
                        "
                        class="light light-green"
                    ></div>
                    <div
                        *ngIf="
                            pipeline.running &&
                            pipeline.healthStatus === 'REQUIRES_ATTENTION'
                        "
                        class="light light-yellow"
                    ></div>
                    <div
                        *ngIf="
                            pipeline.running &&
                            pipeline.healthStatus === 'FAILURE'
                        "
                        class="light light-red"
                    ></div>
                    <div
                        *ngIf="!pipeline.running"
                        class="light light-neutral"
                        [matTooltip]="'Stopped'"
                    ></div>
                    <div class="notification-icon">
                        <button
                            class="ml-10"
                            mat-icon-button
                            [disabled]="!hasPipelineWritePrivileges"
                            (click)="openPipelineNotificationsDialog(pipeline)"
                            *ngIf="pipeline.pipelineNotifications.length > 0"
                            matTooltip="{{
                                pipeline.pipelineNotifications.length
                            }} notification{{
                                pipeline.pipelineNotifications.length > 1
                                    ? 's'
                                    : ''
                            }}"
                            data-cy="pipeline-warning-icon"
                        >
                            <i class="material-icons pipeline-notification"
                                >warning</i
                            >
                        </button>
                    </div>
                    <div
                        class="ml-10 notification-icon"
                        data-cy="pipeline-sync-problem-icon"
                    >
                        <mat-icon
                            color="warn"
                            matTooltip="Invalid pipeline: Modify to fix problems"
                            *ngIf="!pipeline.valid"
                            >sync_problem
                        </mat-icon>
                    </div>
                </div>
            </div>
        </td>
    </ng-container>
    <ng-container matColumnDef="start">
        <th mat-header-cell *matHeaderCellDef>Start</th>
        <td mat-cell *matCellDef="let pipeline">
            <button
                color="accent"
                mat-icon-button
                matTooltip="Start pipeline"
                matTooltipPosition="above"
                data-cy="start-pipeline-button"
                (click)="
                    pipelineOperationsService.startPipeline(
                        pipeline._id,
                        refreshPipelinesEmitter,
                        toggleRunningOperation
                    )
                "
                [disabled]="
                    !hasPipelineWritePrivileges || starting || !pipeline.valid
                "
                *ngIf="!pipeline.running"
            >
                <i class="material-icons">play_arrow</i>
            </button>
            <button
                color="accent"
                mat-icon-button
                matTooltip="Stop pipeline"
                matTooltipPosition="above"
                data-cy="stop-pipeline-button"
                (click)="
                    pipelineOperationsService.stopPipeline(
                        pipeline._id,
                        refreshPipelinesEmitter,
                        toggleRunningOperation
                    )
                "
                [disabled]="!hasPipelineWritePrivileges || stopping"
                *ngIf="pipeline.running"
            >
                <i class="material-icons">stop</i>
            </button>
        </td>
    </ng-container>

    <ng-container matColumnDef="name">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let pipeline">
            <div>
                <b>{{ pipeline.name }}</b>
            </div>
            <div>
                <small> {{ pipeline.description }}</small>
            </div>
        </td>
    </ng-container>

    <ng-container matColumnDef="lastModified">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>Last modified</th>
        <td mat-cell *matCellDef="let pipeline">
            <h5>{{ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm' }}</h5>
        </td>
    </ng-container>

    <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let pipeline">
            <div fxLayout="row" fxLayoutAlign="end center">
                <button
                    color="accent"
                    mat-icon-button
                    matTooltip="Show pipeline"
                    matTooltipPosition="above"
                    (click)="
                        pipelineOperationsService.showPipelineDetails(
                            pipeline._id
                        )
                    "
                >
                    <i class="material-icons">search</i>
                </button>
                <button
                    color="accent"
                    mat-icon-button
                    matTooltip="Modify pipeline"
                    matTooltipPosition="above"
                    *ngIf="hasPipelineWritePrivileges"
                    (click)="
                        pipelineOperationsService.modifyPipeline(pipeline._id)
                    "
                    data-cy="modify-pipeline-btn"
                >
                    <i class="material-icons">mode_edit</i>
                </button>
                <button
                    color="accent"
                    mat-icon-button
                    matTooltip="Permissions"
                    matTooltipPosition="above"
                    *ngIf="isAdmin"
                    (click)="
                        pipelineOperationsService.showPermissionsDialog(
                            pipeline,
                            refreshPipelinesEmitter
                        )
                    "
                    data-cy="open-manage-permissions"
                >
                    <i class="material-icons">share</i>
                </button>
                <button
                    color="accent"
                    mat-icon-button
                    matTooltip="Delete pipeline"
                    matTooltipPosition="above"
                    *ngIf="hasPipelineWritePrivileges"
                    (click)="
                        pipelineOperationsService.showDeleteDialog(
                            pipeline,
                            refreshPipelinesEmitter
                        )
                    "
                    data-cy="delete-pipeline"
                >
                    <i class="material-icons">delete</i>
                </button>
            </div>
        </td>
    </ng-container>
</sp-table>
